<template>
    <view>
        <nui-step :step="stepType"></nui-step>
        <nui-guide :guideList="guideList" @curIndex="curIndex" v-if="isIOS"></nui-guide>
        <nui-guide :guideList="guideList1" @curIndex="curIndex" v-if="!isIOS"></nui-guide>
        <iframe :src="checkPath" class="iframe" frameborder="0" width="100%" height="100%" v-if="!isIOS"></iframe>
        <view class="box" v-else>
            <u-button type="primary" shape="square" :ripple="true" size="medium" class="custom-btn1"
                      @click="toCheckPath"
            >前往【背景审查登记】
            </u-button
            >

            <!--            <view class="faxin-guide" v-if="isShowGuide"></view>-->
            <!--            <view class="faxin-guide_1" v-if="isShowGuide1"></view>-->
            <view class="tips">
                <text>说明：</text>
                <text>请点击下方“前往【背景审查登记】”按钮，进行背景审查登记信息填写；</text>
                <text>如果您已经在“背景审查登记”填写信息并提交，请直接点击“下一步”</text>
                <text class="pic"></text>
            </view>
        </view>
        <view class="bg_check_guide" v-if="isShowGuide"></view>
        <view class="bg_check_access_guide" v-if="isShowAccessGuide"></view>
        <view class="bg_check_back_guide" v-if="isShowBackGuide"></view>
        <view class="bg_check_noIos_guide" v-if="isShowNoIosGuide"></view>
        <view class="bg_check_noIos_access_guide" v-if="isShowNoIosAccessGuide"></view>
        <u-button type="primary" shape="square" :ripple="true" size="medium" class="custom-btn" @click="toPath"
        >下一步
        </u-button
        >
        <u-modal
                v-model="showModel"
                content="请确认已经在【背景审查登记】中点击【提交认证】按钮，且页面显示为“提交成功”信息?"
                @confirm="submitData"
                @cancel="cancel"
                show-cancel-button
        ></u-modal>
    </view>
</template>

<script>
    import {mapGetters} from "vuex";
    import {isIOS} from "@/utils/index.js";
    import AuthInfo from "@/utils/authInfo.js";

    export default {
        name: "BackgroundCheck",
        data() {
            return {
                qrCode: 'http://testxsd.jluomi.com/bg_check.png',
                checkPath: 'https://yunbaoziyuan.cloudbae.cn/femobile/identification?channelCode=100020&taskNo=RW2021120800023&openId=ogcdR6CRJqq78Jqe5enh59VX6lOU',
                showModel: false,
                guideList: [
                    {
                        el: ".custom-btn1", // 需要高亮的元素，这里最好唯一
                        tips: "① 点击这里，前往背景审查登记页面", // 提示文字
                        next: "下一步", // 下一步按钮显示文字
                        style: {
                            // 高亮样式
                            borderRadius: "5px",
                            margin: "-5px 0 0 -5px",
                            width: "58%",
                            height: "50px",
                        },
                        tipStyle: {
                            // tips样式
                            top: "60px",
                            atop: "57px",
                            left: "0px",
                        },
                    },
                    {
                        el: ".bg_check_guide", // 需要高亮的元素，这里最好唯一
                        tips: "② 仔细填写相关信息", // 提示文字
                        next: "下一步", // 下一步按钮显示文字
                        style: {
                            // 高亮样式
                            borderRadius: "12px",
                            margin: "-5px 0 0 -5px",
                            width: "98%",
                            height: "85%",
                            left: "2%",
                            top: "20px",
                        },
                        tipStyle: {
                            // tips样式
                            left: "80px",
                            top: "99%",
                            atop: "98%"
                        },
                    },
                    {
                        el: ".bg_check_access_guide", // 需要高亮的元素，这里最好唯一
                        tips: "③ 同意并提交认证", // 提示文字
                        next: "下一步", // 下一步按钮显示文字
                        style: {
                            // 高亮样式
                            borderRadius: "12px",
                            margin: "-5px 0 0 -5px",
                            width: "98%",
                            height: "93px",
                            left: "2%",
                            top: "76%",
                        },
                        tipStyle: {
                            // tips样式
                            left: "180px",
                            top: "-69px",
                            atop: "-12px",
                        },
                    },
                    {
                        el: ".bg_check_back_guide", // 需要高亮的元素，这里最好唯一
                        tips: "④ 点击此处返回,继续填写入职信息", // 提示文字
                        next: "下一步", // 下一步按钮显示文字
                        style: {
                            // 高亮样式
                            borderRadius: "12px",
                            margin: "-5px 0 0 -5px",
                            width: "98%",
                            height: "68px",
                            left: "2%",
                            top: "90%",
                        },
                        tipStyle: {
                            // tips样式
                            left: "133px",
                            top: "-68px",
                            atop: "-12px",
                        },
                    },
                ],
                guideList1: [
                    {
                        el: ".bg_check_noIos_guide", // 需要高亮的元素，这里最好唯一
                        tips: "① 请仔细填写个人信息", // 提示文字
                        next: "下一步", // 下一步按钮显示文字
                        style: {
                            // 高亮样式
                            borderRadius: "5px",
                            margin: "-5px 0 0 -5px",
                            width: " 98%",
                            height: "72%",
                            left: "9px",
                            top: "50px",
                        },
                        tipStyle: {
                            // tips样式
                            top: "100%",
                            atop: "99%",
                            left: "180px",
                        },
                    },
                    {
                        el: ".bg_check_noIos_access_guide", // 需要高亮的元素，这里最好唯一
                        tips: "② 同意并提交认证", // 提示文字
                        next: "下一步", // 下一步按钮显示文字
                        style: {
                            // 高亮样式
                            borderRadius: "12px",
                            margin: "-5px 0 0 -5px",
                            width: "98%",
                            height: "14%",
                            left: "2%",
                            top: "71%",
                        },
                        tipStyle: {
                            // tips样式
                            top: "100%",
                            atop: "99%",
                            left: "180px",
                        },
                    }
                ],
                isShowGuide: false,
                isShowAccessGuide: false,
                isShowBackGuide: false,
                isShowNoIosGuide: false,
                isShowNoIosAccessGuide: false,
            }
        },
        computed: {
            ...mapGetters(["deptId", "stepType"]),
            isIOS() {
                let ios = isIOS();
                return ios;
            },
        },
        mounted() {
            !isIOS() && (this.isShowGuide = true);
            if (!isIOS()) {
                this.isShowNoIosGuide = true;
                this.isShowGuide = false;
            }
        },
        methods: {
            toCheckPath() {
                window.location.href = this.checkPath
            },
            toPath() {
                this.showModel = true;
            },
            async submitData() {
                // uni.setStorageSync("tip", false);
                await this.$api.riders.addBgCheck();
                AuthInfo.checkUserStatus();
                this.$u.route("pages/step_one/index");
            },
            cancel() {
                this.showModel = false;
            },
            curIndex(num) {
                let ios = isIOS();
                if (ios) {
                    if (num === 2) {
                        this.isShowAccessGuide = true;
                    } else {
                        this.isShowAccessGuide = false;
                    }
                    if (num === 0 || num === 1) {
                        this.isShowGuide = true;
                    } else {
                        this.isShowGuide = false;
                    }
                    if (num === 3) {
                        this.isShowBackGuide = true;
                    } else {
                        this.isShowBackGuide = false;
                    }
                } else {
                    if (num === 0 ) {
                        this.isShowNoIosGuide = true;
                    }else {
                        this.isShowNoIosGuide = false;
                    }
                    if (num === 1) {
                        this.isShowNoIosAccessGuide = true;
                    } else {
                        this.isShowNoIosAccessGuide = false;
                    }
                }
            },
        },
    }
</script>

<style scoped lang="scss">
    ni-page-body {
        height: 100%;
    }

    .iframe {
        height: 75vh;
    }

    .custom-btn {
        margin: 15px auto;
        left: 50%;
        bottom: -10px;
        width: 48%;
        transform: translateX(-50%);
    }

    .box {
        height: 75vh;

        .custom-btn1 {
            position: absolute;
            margin: 15px auto;
            left: 50%;
            bottom: 12%;
            transform: translateX(-50%);
        }

        .tips {
            position: absolute;
            width: 100%;
            left: 5%;
            width: 90%;
            top: 80px;
            color: #999;
            line-height: 25px;

            uni-text {
                display: block;
            }

            .pic {
                display: block;
                background-image: url("../../common/imgs/shencha2.jpg");
                background-repeat: no-repeat;
                background-size: 100% 100%;
                width: 150px;
                height: 280px;
                margin: auto;
            }
        }
    }

    .bg_check_guide {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 10px;
        left: 0;
        background: url("../../common/imgs/shencha5.jpg") no-repeat;
        background-size: 100% 100%;
        z-index: 100;
    }

    .bg_check_access_guide {
        width: 100%;
        height: 95%;
        position: absolute;
        top: 10px;
        left: 0;
        background: url("../../common/imgs/shencha2.jpg") no-repeat;
        background-size: 100% 100%;
        z-index: 100;
    }

    .bg_check_back_guide {
        width: 100%;
        height: 100%;
        position: absolute;
        bottom: 10px;
        left: 0;
        background: url("../../common/imgs/shencha2.jpg") no-repeat;
        background-size: 100% 100%;
        z-index: 100;
    }
    .bg_check_noIos_guide {
        width: 100%;
        height: 100%;
        position: absolute;
        bottom: 10px;
        left: 0;
        background: url("../../common/imgs/shencha5.jpg") no-repeat;
        background-size: 100% 100%;
        z-index: 100;
    }
    .bg_check_noIos_access_guide {
        width: 100%;
        height: 100%;
        position: absolute;
        bottom: 10px;
        left: 0;
        background: url("../../common/imgs/shencha6.jpg") no-repeat;
        background-size: 100% 100%;
        z-index: 100;
    }
</style>
